<template>
  <div class="container">
    <div class="title">编辑文章</div>
    <div class="wrap">
      <el-row>
        <el-col :lg="16" :md="20" :sm="24" :xs="24">
          <el-form :model="form" status-icon ref="ruleForm" :rules="rules" label-width="100px" @submit.native.prevent>
            <el-form-item label="显示：" prop="articleStatus">
              <el-select size="medium" v-model="form.currentStatus" placeholder="请选择">
                <el-option v-for="(item, idx) in form.articleStatus" :key="idx" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="标题：" prop="title">
              <el-input size="medium" v-model="form.title" placeholder="请填写标题"></el-input>
            </el-form-item>

            <el-form-item label="文档类别" prop="categoryData">
              <el-cascader
                expand-trigger="hover"
                :options="form.categoryData"
                v-model="form.categoryVal"
                @change="handleChange"
              >
              </el-cascader>
            </el-form-item>

            <el-form-item label="简短标题：" prop="stitle">
              <el-input size="medium" v-model="form.stitle" placeholder="请填写简短标题"></el-input>
            </el-form-item>

            <el-form-item label="关键字" prop="keywords">
              <el-input size="small" v-model="form.keywords"></el-input>
            </el-form-item>

            <el-form-item label="标签：" prop="tags">
              <el-select size="medium" multiple v-model="form.tagVal" placeholder="请选择">
                <el-option
                  v-for="item in form.tagData"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                  :disabled="item.disabled"
                >
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="文章简介：" prop="description">
              <el-input
                size="medium"
                type="textarea"
                :autosize="{ minRows: 2, maxRows: 4 }"
                placeholder="请输入简介"
                v-model="form.description"
              >
              </el-input>
            </el-form-item>

            <el-form-item label="文档详情：" prop="details">
              <tiny-editor @change="changeEditorText" upload_url="/a/b/c" />
            </el-form-item>

            <el-form-item class="submit">
              <el-button type="primary" @click="submitForm('ruleForm')" :loading="form.loading">保 存</el-button>
              <el-button @click="resetForm('ruleForm')">重 置</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import content from '@/model/content.js'
// eslint-disable-next-line
import TinyEditor from '@/component/base/tinymce'
import log from '@antv/g2plot/lib/utils'

export default {
  props: {
    editContentID: {
      type: Number,
    },
  },
  data() {
    // 对表单各条目的各种验证
    const validateTitle = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入文章标题'))
      } else {
        callback()
      }
    }
    const validateDetails = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请填写文章内容!'))
      } else {
        callback()
      }
    }
    return {
      form: {
        title: '', // 标题
        stitle: '', // 短标题
        keywords: '', // 关键词
        description: '', // 文章简介
        details: '', // 文章详情
        loading: false,
        currentStatus: '', // 文章当前状态值
        tagVal: [], // 标签状态值
        categoryVal: [], // 分类值
        // 文章状态可选值
        articleStatus: [
          { value: '0', label: '退回' },
          { value: '1', label: '待审核' },
          { value: '2', label: '审核通过' },
          { value: '3', label: '审核不通过' },
        ],

        // 标签状态可选数据
        tagData: [
          {
            value: 'tag1',
            label: '标签1',
          },
          {
            value: 'tag2',
            label: '标签2',
          },
        ],

        // 分类数据
        categoryData: [
          {
            value: 'zhinan',
            label: '指南',
            children: [
              {
                value: 'shejiyuanze',
                label: '设计原则',
              },
              {
                value: 'shejisixiang',
                label: '设计思想',
              },
            ],
          },
        ],
      },
      rules: {
        title: [{ validator: validateTitle, trigger: 'blur', required: true }],
        description: [{ type: 'string', trigger: 'blur', required: false }],
        details: [{ validator: validateDetails, trigger: 'blur', required: true }],
        // tagData: [{ type: 'array', trigger: 'change', required: true }],
        categoryData: [{ type: 'array', trigger: 'change', required: true }],
      },
    }
  },
  async mounted() {
    this.loading = true
    this.form = await content.getContent(this.editContentID)
    this.loading = false
  },
  methods: {
    handleChange(value) {
      // 分类数据
      this.categoryVal = value
    },

    changeEditorText(val) {
      this.form.details = val
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.loading = true
          const { title, stitle, details, categoryVal, keywords, description, tagVal, currentStatus } = this.form
          const data = { title, stitle, details, categoryVal, keywords, description, tagVal, currentStatus }
          const res = content.createContent(data)
          this.loading = false
          if (res.code < window.MAX_SUCCESS_CODE) {
            this.$message.success(`${res.message}`)
            this.resetForm(formName)
          }
        } else {
          this.loading = false
          this.$message.error('文章添加失败，请检测填写信息')
          // console.log(error)
          return false
        }
      })
    },
    // 重置表单
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
  },
  components: {
    TinyEditor,
  },
}
</script>

<style lang="scss" scoped>
.container {
  .title {
    height: 59px;
    line-height: 59px;
    color: $parent-title-color;
    font-size: 16px;
    font-weight: 500;
    text-indent: 40px;
    border-bottom: 1px solid #dae1ec;
  }

  .wrap {
    padding: 20px;
  }
}
</style>
